<template>
	<div class="home">
		<h1>toRefs</h1>
		<div>
			<p>user1: {{ user1.name }}</p>
			<p>user2: {{ name }}</p>
			<button @click="funChangeUser2">点击修改user2</button>
		</div>
		<hr>
		
		<child></child>
		<hr>
		
		<toRaw></toRaw>
		<hr>
		
		<toRef></toRef>
		<hr>
		
		<customRef></customRef>
	</div>
</template>

<script>
import { defineComponent, ref, reactive, toRefs } from 'vue';
import child from './child.vue'
import toRaw from './toRaw.vue'
import toRef from './toRef.vue'
import customRef from './customRef.vue'
export default defineComponent({
	components: {
		child,
		toRaw,
		toRef,
		customRef
	}, 
	setup(){
		let user1 = reactive({
			name: '你大爷',
			job: '前端'
		})
		let user2 = reactive({
			name: '你大爷',
			job: '前端'
		})
		// toRefs 可以把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref
		user2 = toRefs(user2)
		function funChangeUser2(){
			console.log( this );
			user1.name = user1.name + 1
			user2.name.value = user2.name.value + 1
		}
		
		return {
			user1,
			...user2,
			funChangeUser2,
		}
	}
});
</script>
